<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">
    <ui:composition template="/pages/template.xhtml">
        <ui:define name="corpo">
            <p:growl id="growl" life="2500"/>
            <p:panel id="panel" header="#{novaJustificativaManagedBean.labelCadastro}">
                <p:messages />
                <p:panelGrid id="pnCabecalho" style="margin-top:10px;width:99%">
                    <p:row>
                        <p:column colspan="2" style="text-align:left">
                            <h:outputLabel value="#{msgs['form.justificativa.label.solicitante']}#{msgs['form.label.doispontos']} "/>
                            <h:outputText id="solicitante"
                                          value="#{novaJustificativaManagedBean.justificativa.solicitante.nome}"
                                          style="text-align:left" />
                        </p:column>
                        <p:column colspan="2" style="text-align:right">
                            <h:outputLabel value="#{msgs['form.justificativa.label.datacriacao']}#{msgs['form.label.doispontos']} " />
                            <h:outputText value="#{novaJustificativaManagedBean.justificativa.data}">
                                <f:convertDateTime pattern="#{msgs['sistema.formato.data']}" />
                            </h:outputText>
                        </p:column>
                    </p:row>
                    <p:row>
                        <p:column colspan="3" styleClass="ui-widget-header">
                            <p:spacer height="0" />
                        </p:column>
                    </p:row>
                    <p:row>
                        <p:column colspan="3" style="text-align:right">
                            <h:outputLabel
                                    value="#{msgs['form.justificativa.label.situacao']}#{msgs['form.label.doispontos']} " />
                            <h:outputText value="#{novaJustificativaManagedBean.justificativa.status}">
                                <f:converter converterId="StatusConverter" />
                            </h:outputText>
                        </p:column>
                    </p:row>
                </p:panelGrid>

                <p:separator styleClass="tabela" />

                <h:form id="justificativaForm">
                    <p:panelGrid id="pgrdDetalhamento" styleClass="tabela">
                        <p:row>
                            <p:column style="text-align:left; width:135px;">
                                <h:outputLabel value="#{msgs['form.justificativa.label.motivo']}#{msgs['form.label.doispontos']} " />
                            </p:column>
                            <p:column colspan="3">
                                <p:selectOneMenu id="motivo"
                                                 value="#{novaJustificativaManagedBean.justificativa.motivo}"
                                                 rendered="#{novaJustificativaManagedBean.view.permiteEditar}"
                                                 valueChangeListener="#{motivoManagedBean.mudouMotivo}"
                                                 required="true"
                                                 requiredMessage="#{msgs['form.justificativa.motivo.required']}">
                                    <p:ajax event="change" update="pgrdDetalhamento"/>
                                    <f:selectItem itemValue="" itemLabel="" />
                                    <f:selectItems value="#{motivoManagedBean.tipoMotivosList}" />
                                </p:selectOneMenu>
                                <p:message id="motivoMsg" for="motivo" />
                                <h:outputText id="txtMotivo" value="#{novaJustificativaManagedBean.justificativa.motivo}" rendered="#{not novaJustificativaManagedBean.view.permiteEditar}" converter="EnumComCodigoDescricao"/>
                            </p:column>
                        </p:row>
                        <p:row>
                            <p:column style="text-align: left; width: 135px;">
                                <h:outputLabel value="#{msgs['form.justificativa.label.dataSolicitacao']}#{msgs['form.label.doispontos']}"
                                               rendered="#{motivoManagedBean.configuracao['DATA_INI']}"/>
                            </p:column>
                            <p:column style="width: 220px;">
                                <p:calendar styleClass="calendar"
                                            value="#{novaJustificativaManagedBean.justificativa.dataSolicitacao}" id="calDataSolicitacao"
                                            showOn="button" pattern="#{msgs['sistema.formato.data']}" timeOnly="false" required="true"
                                            requiredMessage="#{msgs['form.justificativa.dtsolicitacao.required']}"
                                            rendered="#{motivoManagedBean.configuracao['DATA_INI'] and novaJustificativaManagedBean.view.permiteEditar}" />
                                <p:message id="msgCalDataSolicitacao" for="calDataSolicitacao"/>
                                <h:outputText id="txtDataSolicitacao" value="#{novaJustificativaManagedBean.justificativa.dataSolicitacao}" rendered="#{motivoManagedBean.configuracao['DATA_INI'] and not novaJustificativaManagedBean.view.permiteEditar}">
                                    <f:convertDateTime type="date" pattern="#{msgs['sistema.formato.data']}"/>
                                </h:outputText>
                            </p:column>
                            <p:column style="text-align:center;width:25px;padding:0;">
                                <h:outputLabel value=" #{msgs['form.justificativa.label.ate']} "
                                               rendered="#{motivoManagedBean.configuracao['DATA_FIM']}" />
                            </p:column>
                            <p:column>
                                <p:calendar styleClass="calendar"
                                            value="#{novaJustificativaManagedBean.justificativa.dataSolicitacaoFim}" id="calDataSolicitacaoFim"
                                            showOn="button" pattern="#{msgs['sistema.formato.data']}" timeOnly="false" required="true"
                                            requiredMessage="#{msgs['form.justificativa.dtsolicitacaofim.required']}"
                                            rendered="#{motivoManagedBean.configuracao['DATA_FIM'] and novaJustificativaManagedBean.view.permiteEditar}" />
                                <p:message id="msgCalDataSolicitacaoFim" for="calDataSolicitacaoFim"/>
                                <h:outputText id="txtDataSolicitacaoFim" value="#{novaJustificativaManagedBean.justificativa.dataSolicitacaoFim}" rendered="#{motivoManagedBean.configuracao['DATA_FIM'] and not novaJustificativaManagedBean.view.permiteEditar}">
                                    <f:convertDateTime type="date" pattern="#{msgs['sistema.formato.data']}"/>
                                </h:outputText>
                            </p:column>
                        </p:row>
                        <p:row>
                            <p:column style="text-align:left; width:135px;">
                                <h:outputLabel value="#{msgs['form.justificativa.label.horario']}#{msgs['form.label.doispontos']} "
                                               rendered="#{motivoManagedBean.configuracao['HORA_INI']}" />
                            </p:column>
                            <p:column style="width:220px;">
                                <p:calendar id="hrini"
                                            styleClass="calendar"
                                            value="#{novaJustificativaManagedBean.justificativa.hrIni}"
                                            showOn="button"
                                            pattern="#{msgs['sistema.formato.hora']}"
                                            timeOnly="true"
                                            required="true"
                                            requiredMessage="#{msgs['form.justificativa.hrini.required']}"
                                            rendered="#{motivoManagedBean.configuracao['HORA_INI'] and novaJustificativaManagedBean.view.permiteEditar}" />
                                <p:message id="hriniMsg" for="hrini"/>
                                <h:outputText id="dtHoraInicio" value="#{novaJustificativaManagedBean.justificativa.hrIni}" rendered="#{motivoManagedBean.configuracao['HORA_INI'] and not novaJustificativaManagedBean.view.permiteEditar}">
                                    <f:convertDateTime type="time" pattern="#{msgs['sistema.formato.hora']}" timeZone="#{msgs['sistema.formato.timezone']}"/>
                                </h:outputText>
                            </p:column>
                            <p:column style="text-align:center;width:25px;padding:0;">
                                <h:outputLabel value=" #{msgs['form.justificativa.label.ate']} "
                                               rendered="#{motivoManagedBean.configuracao['HORA_FIM']}" />
                            </p:column>
                            <p:column>
                                <p:calendar id="hrfim"
                                            styleClass="calendar"
                                            value="#{novaJustificativaManagedBean.justificativa.hrFim}"
                                            showOn="button"
                                            pattern="#{msgs['sistema.formato.hora']}"
                                            timeOnly="true"
                                            required="true"
                                            requiredMessage="#{msgs['form.justificativa.hrfim.required']}"
                                            rendered="#{motivoManagedBean.configuracao['HORA_FIM'] and novaJustificativaManagedBean.view.permiteEditar}" />
                                <p:message id="hrfimMsg" for="hrfim" />
                                <h:outputText id="dtHoraFim" value="#{novaJustificativaManagedBean.justificativa.hrFim}" rendered="#{motivoManagedBean.configuracao['HORA_FIM'] and not novaJustificativaManagedBean.view.permiteEditar}">
                                    <f:convertDateTime type="time" pattern="#{msgs['sistema.formato.hora']}" timeZone="#{msgs['sistema.formato.timezone']}"/>
                                </h:outputText>
                            </p:column>
                        </p:row>
                        <p:row rendered="#{motivoManagedBean.configuracao['CAUSA_FALTA']}">
                            <p:column style="text-align:left; width:135px;">
                                <h:outputLabel id="lbCausaFalta" value="#{msgs['form.justificativa.label.causafalta']}#{msgs['form.label.doispontos']} "/>
                            </p:column>
                            <p:column colspan="3">
                                <p:selectOneMenu id="causafalta"
                                                 rendered="#{novaJustificativaManagedBean.view.permiteEditar}"
                                                 required="true"
                                                 requiredMessage="#{msgs['form.justificativa.erro.causafalta']}"
                                                 value="#{novaJustificativaManagedBean.justificativa.tipofalta}">
                                    <f:selectItem itemValue="" itemLabel="" />
                                    <f:selectItems
                                            value="#{motivoManagedBean.tipoFaltaList}" />
                                </p:selectOneMenu>
                                <p:message id="causafaltaMsg" for="causafalta" />
                                <h:outputText value="#{novaJustificativaManagedBean.justificativa.tipofalta}" rendered="#{not novaJustificativaManagedBean.view.permiteEditar}" converter="EnumComCodigoDescricao"/>
                            </p:column>
                        </p:row>
                        <p:row rendered="#{motivoManagedBean.configuracao['TIPO_BANCO_HORAS']}">
                            <p:column style="text-align:left; width:135px;">
                                <h:outputLabel value="#{msgs['form.justificativa.label.bancohoras']}#{msgs['form.label.doispontos']} " />
                            </p:column>
                            <p:column colspan="3">
                                <p:selectOneMenu id="tipobancohoras"
                                                 value="#{novaJustificativaManagedBean.justificativa.tipobancohoras}"
                                                 rendered="#{novaJustificativaManagedBean.view.permiteEditar}"
                                                 required="true"
                                                 requiredMessage="#{msgs['form.justificativa.tipobancohoras.required']}">
                                    <f:selectItem itemValue="" itemLabel="" />
                                    <f:selectItems value="#{motivoManagedBean.tipoBancoHorasList}" />
                                </p:selectOneMenu>
                                <p:message id="tipobancohorasMsg" for="tipobancohoras" />
                                <h:outputText value="#{novaJustificativaManagedBean.justificativa.tipobancohoras}" rendered="#{not novaJustificativaManagedBean.view.permiteEditar}" converter="EnumComCodigoDescricao"/>
                            </p:column>
                        </p:row>
                        
                        <p:row rendered="#{motivoManagedBean.configuracao['TIPO_FALTA_MARCACAO']}">
                            <p:column style="text-align:left; width:135px;">
                                <h:outputLabel value="#{msgs['form.justificativa.label.faltamarcacao']}#{msgs['form.label.doispontos']} " />
                            </p:column>
                            <p:column colspan="3">
                                <p:selectOneMenu id="tipofaltamarcacao"
                                                 value="#{novaJustificativaManagedBean.justificativa.tipofaltamarcacao}"
                                                 rendered="#{novaJustificativaManagedBean.view.permiteEditar}"
                                                 required="true"
                                                 requiredMessage="#{msgs['form.justificativa.tipofaltamarcacao.required']}">
                                    <f:selectItem itemValue="" itemLabel="" />
                                    <f:selectItems value="#{motivoManagedBean.tipoFaltaMarcacaoList}" />
                                </p:selectOneMenu>
                                <p:message id="tipofaltamarcacaoMsg" for="tipofaltamarcacao" />
                                <h:outputText value="#{novaJustificativaManagedBean.justificativa.tipofaltamarcacao}" rendered="#{not novaJustificativaManagedBean.view.permiteEditar}" converter="EnumComCodigoDescricao"/>
                            </p:column>
                        </p:row>
                        
                    </p:panelGrid>

                    <p:fieldset id="justificativaGrid" legend="#{msgs['form.justificativa.legenda.justificativa']}">
                        <p:row>
                            <p:column style="text-align:left">
                                <p:inputTextarea id="descricao" rows="5" cols="30"
                                                 maxlength="300" autoResize="true" required="true"
                                                 requiredMessage="#{msgs['form.justificativa.justificativa.required']}"
                                                 rendered="#{novaJustificativaManagedBean.view.permiteEditar}"
                                                 value="#{novaJustificativaManagedBean.justificativa.descricao}" />
                                <p:message id="descricaoMsg" for="descricao" />
                                <h:outputText value="#{novaJustificativaManagedBean.justificativa.descricao}"
                                              rendered="#{not novaJustificativaManagedBean.view.permiteEditar}"/>
                            </p:column>
                        </p:row>
                    </p:fieldset>

                    <p:fieldset id="rhGrid" legend="#{msgs['form.justificativa.legenda.instrucoesrh']}">
                        <p:panelGrid styleClass="semBorda">
                            <p:row>
                                <p:column>
                                    <h:outputLabel
                                            value="#{msgs['form.justificativa.label.tipoDecisao']}#{msgs['form.label.doispontos']} " />
                                    <h:outputText id="txtDecisaoRh"
                                                  value="#{novaJustificativaManagedBean.justificativa.tipoDecisao}"
                                                  converter="EnumComCodigoDescricao"
                                                  rendered="#{not novaJustificativaManagedBean.view.temInformarDecisao}"/>
                                    <p:selectOneMenu id="decisaoRh"
                                                     rendered="#{novaJustificativaManagedBean.view.temInformarDecisao}"
                                                     value="#{novaJustificativaManagedBean.justificativa.tipoDecisao}"
                                                     required="true"
                                                     requiredMessage="#{msgs['form.justificativa.decisaorh.required']}">
                                        <f:selectItem itemValue="" itemLabel="" />
                                        <f:selectItems value="#{novaJustificativaManagedBean.tipoDecisaoList}" />
                                    </p:selectOneMenu>
                                    <p:message id="decisaoRhMsg" for="decisaoRh" rendered="#{novaJustificativaManagedBean.view.temInformarDecisao}" />
                                </p:column>
                            </p:row>
                            <p:row>
                                <p:column style="text-align:left">
                                    <h:outputLabel value="#{msgs['form.justificativa.label.observacao']}#{msgs['form.label.doispontos']} " />
                                    <h:outputText id="txtObsRh" value="#{novaJustificativaManagedBean.justificativa.obsRh}"
                                                  rendered="#{not novaJustificativaManagedBean.view.temInformarDecisao}"/>
                                    <p:inputTextarea id="obsRh" rows="5" cols="30"
                                                     rendered="#{novaJustificativaManagedBean.view.temInformarDecisao}"
                                                     maxlength="300" autoResize="true" required="false"
                                                     requiredMessage="#{msgs['form.justificativa.observacao.required']}"
                                                     value="#{novaJustificativaManagedBean.justificativa.obsRh}" />
                                    <p:message id="obsRhMsg" for="obsRh" />
                                </p:column>
                            </p:row>
                        </p:panelGrid>
                    </p:fieldset>

                    <p:panel header="#{msgs['form.justificativa.legenda.aprovacoes']}"
                             style="margin-top: 20px;" rendered="#{not empty novaJustificativaManagedBean.justificativa.aprovacoes}">

                        <p:dataTable var="historico"
                                     value="#{novaJustificativaManagedBean.justificativa.aprovacoes}"
                                     id="tblAprovacoesJustificativa">
                            <p:column style="width:2%">
                                <p:rowToggler rendered="#{historico.tipoEvento.codigo eq 4 or historico.tipoEvento.codigo eq 7 or historico.tipoEvento.codigo eq 10}" />
                            </p:column>
                            <p:column id="colDataAprovacoes">
                                <f:facet name="header">
                                    <h:outputText value="#{msgs['form.justificativa.tabela.historico.coluna.data']}" />
                                </f:facet>
                                <h:outputText value="#{historico.data}">
                                    <f:convertDateTime pattern="#{msgs['sistema.formato.data']}" />
                                </h:outputText>
                            </p:column>
                            <p:column id="colUsuarioHistorico">
                                <f:facet name="header">
                                    <h:outputText value="#{msgs['form.justificativa.tabela.historico.coluna.usuario']}" />
                                </f:facet>
                                <h:outputText value="#{historico.usuario.nome}" />
                            </p:column>
                            <p:column id="colEventoHistorico">
                                <f:facet name="header">
                                    <h:outputText value="#{msgs['form.justificativa.tabela.historico.coluna.evento']}" />
                                </f:facet>
                                <h:outputText value="#{msgs[historico.tipoEvento.descricao]}" />
                            </p:column>

                            <p:rowExpansion rendered="#{historico.tipoEvento.codigo eq 4 or historico.tipoEvento.codigo eq 7 or historico.tipoEvento.codigo eq 10}">
                                <h:panelGroup id="display" columns="4">
                                    <h:outputLabel value="#{msgs['form.justificativa.label.motivo']}#{msgs['form.label.doispontos']}"/>
                                    <h:outputText value="#{historico.observacao}"/>
                                </h:panelGroup>
                            </p:rowExpansion>

                        </p:dataTable>
                    </p:panel>

                    <p:panelGrid id="idGrdProxResponsavel" styleClass="tabela" rendered="#{novaJustificativaManagedBean.view.temProximoPasso}">
                        <p:row>
                            <p:column style="table-layout:fixed;width:130px">
                                <h:outputLabel value="#{msgs['form.justificativa.workflow.label.aprovador']}#{msgs['form.label.doispontos']} " />
                            </p:column>
                            <p:column>
                                <p:selectOneMenu id="idSlctProxResponsavel"
                                                 required="true"
                                                 requiredMessage="#{msgs['form.justificativa.workflow.aprovador.required']}"
                                                 value="#{novaJustificativaManagedBean.justificativa.idProximoResponsavel}">
                                    <f:selectItem itemValue="" itemLabel="#{msgs['form.combo.selecione']}" />
                                    <f:selectItems value="#{novaJustificativaManagedBean.escolhas}" />
                                </p:selectOneMenu>
                                <p:message id="idMsgProximoResponsavel" for="idSlctProxResponsavel" />
                            </p:column>
                        </p:row>
                    </p:panelGrid>

                    <p:commandButton id="idNextStep"
                                     rendered="#{novaJustificativaManagedBean.view.temProximoPasso}"
                                     value="#{msgs['form.justificativa.botao.enviar']}"
                                     update=":panel"
                                     action="#{fluxoJustificativaManagedBean.proximo}"
                                     oncomplete="handleProximo(xhr, status, args)"
                                     icon="ui-icon-circle-arrow-e">
                        <f:setPropertyActionListener target="#{fluxoJustificativaManagedBean.justificativa}" value="#{novaJustificativaManagedBean.justificativa}"/>
                        <f:setPropertyActionListener target="#{fluxoJustificativaManagedBean.proximoPasso}" value="#{workflow}"/>
                    </p:commandButton>

                    <p:commandButton id="idConcluir"
                                     rendered="#{novaJustificativaManagedBean.view.temConcluir}"
                                     value="#{msgs['form.justificativa.botao.concluidorh']}"
                                     action="#{fluxoJustificativaManagedBean.proximo}"
                                     update=":panel"
                                     oncomplete="handleConcluir(xhr, status, args)"
                                     icon="ui-icon-circle-arrow-e">
                        <f:setPropertyActionListener target="#{fluxoJustificativaManagedBean.justificativa}" value="#{novaJustificativaManagedBean.justificativa}"/>
                        <f:setPropertyActionListener target="#{fluxoJustificativaManagedBean.proximoPasso}" value="#{concluir}"/>
                    </p:commandButton>

                    <p:commandButton id="btnCancelar"
                                     rendered="#{novaJustificativaManagedBean.view.temCancelar}"
                                     value="#{msgs['form.justificativa.botao.cancelar']}"
                                     oncomplete="cadDialog.show()" icon="ui-icon-circle-arrow-e"/>
                </h:form>

            </p:panel>
            <p:separator style="margin-top: 20px;" />

            <p:panel header="#{msgs['form.justificativa.legenda.historico']}"
                     style="margin-top: 20px;" rendered="#{not empty novaJustificativaManagedBean.justificativa.tramite}">

                <p:dataTable var="historico"
                             value="#{novaJustificativaManagedBean.justificativa.tramite}"
                             id="tblHistoricoJustificativa">
                    <p:column id="colDataHistorico">
                        <f:facet name="header">
                            <h:outputText
                                    value="#{msgs['form.justificativa.tabela.historico.coluna.data']}" />
                        </f:facet>
                        <h:outputText value="#{historico.data}">
                            <f:convertDateTime pattern="#{msgs['sistema.formato.data']}" />
                        </h:outputText>
                    </p:column>
                    <p:column id="colUsuarioHistorico">
                        <f:facet name="header">
                            <h:outputText
                                    value="#{msgs['form.justificativa.tabela.historico.coluna.usuario']}" />
                        </f:facet>
                        <h:outputText value="#{historico.usuario.nome}" />
                    </p:column>
                    <p:column id="colEventoHistorico">
                        <f:facet name="header">
                            <h:outputText
                                    value="#{msgs['form.justificativa.tabela.historico.coluna.evento']}" />
                        </f:facet>
                        <h:outputText value="#{msgs[historico.tipoEvento.descricao]}" />
                    </p:column>
                </p:dataTable>
            </p:panel>

            <p:ajaxStatus onstart="statusDialog.show();"
                          onsuccess="statusDialog.hide()" />

            <p:dialog modal="true" widgetVar="statusDialog" header="Status"
                      draggable="false" closable="false" resizable="false">
                <p:graphicImage value="/resources/imagens/ajax-loader-bar.gif" />
            </p:dialog>


            <p:dialog id="idDialogCancel" widgetVar="cadDialog"
                      header="#{msgs['dialog.cancelar.titulo']}" closable="true"
                      resizable="false" modal="true" hideEffect="slide" showEffect="slide"
                      draggable="false">

                <h:form id="formCancelaId">
                    <h:panelGrid id="display" cellpadding="4" style="margin:0 auto;">
                        <p:row>
                            <p:column>
                                <p:messages />
                            </p:column>
                        </p:row>
                        <p:separator />
                        <p:row>
                            <p:column>
                                <p:inputTextarea id="motivoCancela" rows="5" cols="30"
                                                 maxlength="300" autoResize="true"
                                                 requiredMessage="#{msgs['dialog.cancelar.valida.justificativa']}"
                                                 required="true"
                                                 value="#{novaJustificativaManagedBean.justificativa.cancelamento}" />
                            </p:column>
                        </p:row>
                        <p:row>
                            <p:column colspan="2">
                                <p:commandButton id="btsalvar"
                                                 value="#{msgs['dialog.cancelar.botao.salvar']}"
                                                 update="display"
                                                 action="#{fluxoJustificativaManagedBean.proximo}"
                                                 oncomplete="handleCancelRequest(xhr, status, args)">
                                    <f:setPropertyActionListener target="#{fluxoJustificativaManagedBean.justificativa}" value="#{novaJustificativaManagedBean.justificativa}"/>
                                    <f:setPropertyActionListener target="#{fluxoJustificativaManagedBean.proximoPasso}" value="#{reprovacao}"/>
                                </p:commandButton>
                                <p:commandButton value="Voltar" update="display" process="@this" oncomplete="cadDialog.hide()"/>
                            </p:column>
                        </p:row>
                    </h:panelGrid>
                </h:form>
            </p:dialog>
            <script type="text/javascript">
                function handleCancelRequest(xhr, status, args) {
                    if (args.validationFailed || !args.sucesso) {
                        jQuery('#idDialogCancel').effect("shake", {
                            times : 3
                        }, 100);
                    } else {
                        cadDialog.hide();
                        alert("#{msgs['form.justificativa.mensagem.cancelar']}");
                        location.href = 'welcome.jsf';
                    }
                }
                function handleProximo(xhr, status, args) {
                    if (!args.validationFailed &amp;&amp; args.sucesso) {
                        alert("#{msgs['form.justificativa.mensagem.envioProximo']}");
                        location.href = 'welcome.jsf';
                    }
                }
                function handleConcluir(xhr, status, args) {
                    if (!args.validationFailed &amp;&amp; args.sucesso) {
                        alert("#{msgs['form.justificativa.mensagem.concluido']}");
                        location.href = 'welcome.jsf';
                    }
                }
            </script>

        </ui:define>
    </ui:composition>
</html>